<template>
  <div class="f mt20">
    <div class="data-bg f1 mr20 score-data">
      <div class="score-title bold">得分数据</div>
      <div class="C49577A f aie">
        <div class="mt40 mr50">
          <div class="C2E62F5 mb10 f14">
            <span class="f24 bold">{{ dataObj.stuScore }}</span>/{{ dataObj.totalQuestion }}
          </div>
          <div class="f14">我的得分</div>
        </div>
        <div class="mt40">
          <div class="mb10 f14">
            <span class="black bold f18 mr5">{{ dataObj.totalDuration }}</span>分钟
          </div>
          <div class="f14">总用时</div>
        </div>
      </div>
      <div class="f aic jcsb mt25">
        <div class="statistics f aic jcsb f1 mr20">
          <div>
            <div class="bold f18">{{ dataObj.trueQuestion }}</div>
            <div class="f14 mt10">正确题</div>
          </div>
          <img src="@/assets/images/chart1.png" alt="" />
        </div>
        <div class="statistics f aic jcsb f1 mr20">
          <div>
            <div class="bold f18">{{ dataObj.errorQuestion }}</div>
            <div class="f14 mt10">错误题</div>
          </div>
          <img src="@/assets/images/chart2.png" alt="" />
        </div>
        <div class="statistics f aic jcsb f1">
          <div>
            <div class="bold f18">{{ dataObj.accuracy }}</div>
            <div class="f14 mt10">正确率</div>
          </div>
          <img src="@/assets/images/chart3.png" alt="" />
        </div>
      </div>
    </div>
    <div class="data-bg f1 pb15">
      <div class="score-title2 bold">得分数据图</div>
      <ECharts :options="chartOptions" width="100%" height="100%" v-if="scoreDataCharts.length>0" />
    </div>
  </div>
</template>

<script setup lang="ts">
import ECharts from "@/components/eCharts/index.vue";
import * as echarts from "echarts";
const props = defineProps(['dataObj' ])
const scoreDataCharts = ref(props.dataObj.scoreDataCharts);
import { parseTime} from '@/utils/util'
let xaxisData = [];
let seriesData = [];

scoreDataCharts.value.forEach((item) => {
  xaxisData.push(parseTime(item.date));
  seriesData.push(item.score);
});
const chartOptions = {
  color: ["#40D5DE", "#257FFB", "#37A2FF", "#FF0087", "#FFBF00"],
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985",
      },
    },
  },
  grid: {
    top: "12%",
    left: 0,
    right: "10px",
    bottom: 0,
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      data: xaxisData,
    },
  ],
  yAxis: [
    {
      type: "value",
    },
  ],
  series: [
    {
      name: "分数",
      type: "line",
      stack: "Total",
      smooth: true,
      showSymbol: false,
      lineStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: "#70D7DA", // 起始颜色
          },
          {
            offset: 0.5,
            color: "#6FAAD4",
          },
          {
            offset: 1,
            color: "#394F92", // 结束颜色
          },
        ]),
        width: 2,
        shadowColor: "#6FAAD4",
        shadowBlur: 10,
        shadowOffsetY: 8,
        shadowOffsetX: 8,
      },
      emphasis: {
        focus: "series",
      },
      data: seriesData,
    },
  ],
};
</script>
<style lang="scss" scoped>
.data-bg {
  background: linear-gradient(180deg, #e7f2ff 0%, #ffffff 30%);
  border-radius: 10px;
  border: 1px solid #ffffff;
  min-height: 250px;
  padding: 20px;
}
.score-title {
  background: url("@/assets/images/data1.png") no-repeat;
  padding-left: 25px;
}
.score-title2 {
  background: url("@/assets/images/data2.png") no-repeat;
  padding-left: 25px;
}
.statistics {
  background: #f8fafd;
  height: 75px;
  padding: 0 25px;
  border-radius: 10px;
}
.score-data {
  flex: 2.5;
}
.C49577A {
  color: #49577a;
}
.C2E62F5 {
  color: #2e62f5;
}
</style>
